<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">
                <p class="col-md-4">&nbsp;</p>
            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="10">
        <router-link tag="div" :to="{path:routerPath('achievementsThree'), query: {card:item.user_card_no}}" class="analyItem anItemBor analyItem-card" active-class="anItemBor-active" v-for="(item,index) in achieveMentList" :key="index" exact>
            <p class="analyItemTit tx-center Investment">绩效名片</p>
            <div class="analyItemCon">
                <div class="clo-md-12">
                    <div class="postDivMsg fl">
                        <div class="imgplementInfo relative tx-center">
                            <div class="groupImgs">
                                <img :src="item.img" :alt="item.u_xingming">
                            </div>
                            <span title="执行人" class="groupName tx-fb cOrange width80">{{userInfo.as_diquName}}-{{item.u_xingming}}</span>
                        </div>
                    </div>
                    <div class="fl relative cradContent">
                        <div class="col-md-12 h40">
                            <div class="col-md-3 fl"><span>{{item.user_card_no}}</span></div>
                            <div class="col-md-3 fl "><strong>人员产值 </strong></div>
                            <div class="col-md-6 fl">
                                <span class="fz14 pr8"><span class="cGreen">¥{{item.prize}}</span>/<span class="cRed">¥{{item.punish}}</span></span>
                                <span class="el-tag el-tag--warning fr el-tag--mini el-tag--light"><strong class="cOrange">{{item.year}}-{{item.month}}</strong></span>
                            </div>
                        </div>
                        <div class="col-md-12 h40">
                            <div class="col-md-3 fl"><span class="cLightGray pr2">标准</span><span>{{item.greatMore.toFixed(2)}}万</span></div>
                            <div class="col-md-3 fl"><span class="cLightGray pr2">差额</span> <span>{{item.resultMoney.toFixed(2)}}万</span></div>
                            <div class="col-md-3 fl"><span class="cLightGray pr2">奖罚 </span><span>{{item.prizePunish.toFixed(2)}}元</span></div>
                            <div class="col-md-3 fl"><span class="cLightGray pr2">状态 </span><span class="cLightGray pr8 cGreen">已接通</span></div>
                        </div>
                        <!-- <div class="col-md-12 lh22 h45"><span data-title="提升监理、工程经理人均产值">提升监理、工程经理人均产值</span></div> -->
                    </div>
                    <span class="circlemark circlemark-green">{{Number(new Date(new Date().getFullYear(),(new Date().getMonth() + 1),0).getDate()) - Number(new Date().getDate())}}</span>
                </div>
            </div>
        </router-link>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getUserManageMonthEvaluation } from '../Resources/Api/achievements'
export default {
    data () {
        return {
            achieveMentList: [] // 绩效集合
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    created () {
        this.getUserManageMonthEvaluation()
    },
    methods: {
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        getUserManageMonthEvaluation () {
            let parm = {
                diqu: this.userInfo.as_diquId
            }
            // 获取绩效接口
            getUserManageMonthEvaluation(parm).then((result) => {
                if (result.data.StatusCode === 0) {
                    this.achieveMentList = result.data.Body.allOnJobGCJL
                }
            }).catch((error) => {
                console.log(error)
            })
        }

    }
}
</script>
<style lang="scss" scoped>
    .analyItem .analyItemTit.Investment{
        background-color: #f9bb2d;
        color: #fff;
    }
    .postDivMsg{
        width: 80px;
        height: 30px;
        margin-top: 20px;
        font-size: 12px;
    }
    .imgplementInfo{
        width: 80px;
        border-radius: 50%;
    }
    .groupImgs{
        overflow: hidden;
        width: 60px;
        height: 60px;
        margin:0px 0 0 -20px;
        border: 2px solid;
        border-radius: 50%;
        position: absolute;
        top: -20px;
        left: 25px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .analyItem-card {
        font-size: 12px;
    }
    .analyItem-card .cradContent{
        width: 330px;
    }
    .h40{
        line-height: 40px;
    }
    .groupName {
        position: absolute;
        left: -2px;
        top: 45px;
        border-radius: 3px;
        border: 1px solid orange;
    }
    .analyItem-card .imgplementInfo .groupName, .analyItem-card .imgplementInfo .orderType {
        padding: 0 4px;
        border-radius: 3px;
        border: 1px solid orange;
    }
    .width80{
        width:80px
    }
    .h45 {
        height: 45px;
    }
    .pr2 {
        padding-right: 2px;
    }
</style>
